<%@ page import="service.UserService" %>
<%@ page import="java.util.List" %>
<%@ page import="java.util.Map" %>
<%@ page import="entity.UserLogin" %><%--
 Created by IntelliJ IDEA.
 User: administrator
 Date: 2021/4/6
 Time: 18:48
 To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>主页</title>
    <script src="js/jQuery.js"></script>

</head>
<body>
<%
    // 判断cookie里有没有token，如果没有说明没登录
    Cookie[] cookies = request.getCookies();
    boolean login = false;
    for (Cookie cookie : cookies) {
        if (cookie.getName().equals("TOKEN")) {
            login = true;
        }
    }
    if (!login) {
        session.setAttribute("msg", "请登录");
        response.sendRedirect("login.jsp");
        return;
    }
%>

<link rel="stylesheet" href="css/pageCss.css">
<link rel="stylesheet" href="iconfont/iconfont.css">
<div class="mainDiv">
    <%--   功能栏--%>
    <div class="part one">
<%--        个人信息蒙版--%>
<%--        <div class="UserInfo_Mask"  id="UserInfo_Mask">--%>
            <div class="part_oneMask" id="part_oneMask">
                <span class="iconfont icon-close-bold" id="icon_oneMask_close" onclick="$('#part_oneMask').hide();"></span>
                <div class="status" id="me_status">

                </div>
            </div>

    
<%--        </div>--%>

        <%--        点击头像显示个人信息--%>
        <div class="meheadImg" id="meheadImg"></div>
        <div class="one_top">
<%--            <p class="p_span"><span class="iconfont icon-comment" style="color: #00d2ff"--%>
<%--                                    onclick="icon_clickTwo('.icon-comment','#two_chaw')"></span></p>--%>
            <p class="p_span"><span class="iconfont icon-user" id="pageIcon" style="color: #00d2ff"
                                    onclick="icon_clickTwo('#pageIcon')"></span></p>
        </div>
        <div class="one_bottom" style="">
            <p class="p_span"><span class="iconfont icon-setting"
                                    onclick="icon_click('.icon-setting'),$('#loginc').slideToggle()"></span></p>
<%--            退出登录--%>
            <div  id="loginc" style="width: 80px;border: #cccccc 1px solid ;
            text-align: center;position: absolute;left: 47px;bottom:2px;display: none">
                <ul>
                    <li onclick="location.href='<%= request.getContextPath()%>/loginOut';">退出登录</li>
                </ul>
            </div>
        </div>

    </div>
    <%--    好友板块--%>

    <div class="part two">
        <%--        添加好友--%>
        <div class="two_headTab">
            <form action="">
                <span class="iconfont icon-search"  onclick="vagueSelect()"></span>
                <input type="text" placeholder="搜索" id="vague" name="addFri">
                <span class="iconfont icon-add-bold" onclick="$('.headTab_add').show()"></span>

            </form>
<%--            添加好友div--%>
            <div class="headTab_add">
                <div>
                    <h3>找好友</h3>
                    <form action=>
                        <span class="iconfont icon-close-bold" id="add_close" onclick="$('.headTab_add').hide()"></span>
                        <input type="text" name="friidAdd" id="friidAdd">
                        <button type="button" onclick="seleaddFri()">查找</button>
                    </form>
                </div>
                <div id="addFriinfo" style="height: 100px">
                </div>
                <% UserService userSer = new UserService(); %>
                <script>
                    function seleaddFri() {
                        $.ajax({
                            url: "<%= request.getContextPath() %>/seleaddfri?acc=" + $('#friidAdd').val(),
                            type: 'get',
                            dataType: "json",
                            success: function (data) {
                                console.log(data)
                                $('#addFriinfo').html(
                                        `<div class="addFriimg"><img src=" `+data[0].meimage+`" alt="" width="100%"> </div>
                                    <sapn id="addFriname" >` + data[0].nickname + `(<span style="color: #00d2ff">`+data[0].account +`</span>)</sapn>
                                    <button onclick="location.href='addfri2?fid='+$('#friidAdd').val()">添加</button>
                                `
                                )
                            }
                        })
                    }
                </script>


            </div>
            <div  class="verifyMask" id="vagueMask" style="display: none">


            </div>

        </div>
        <%--        --%>
        <div>
            <div id="two_friend">

            </div>
        </div>


    </div>
    <%--  聊天模块--%>
    <div class="part three">
        <%--    个人信息蒙版  --%>
        <div class="three_mask">
            <span class="iconfont icon-close-bold" id="three_maks-close" onclick="$('.three_mask').hide()"></span>
            <div class="status" id="status_ID">

            </div>
        </div>
        <%--    聊天板块--%>
        <div class="three_page" id="three_page_ID">
<%--            <button type="submit"></button>--%>

        </div>
    </div>
        <%
            if(session.getAttribute("addmsg") !=null){
                out.print("<script> alert(`"+session.getAttribute("addmsg")+"`); </script>");
                session.removeAttribute("addmsg");
            }
        %>
        <%
            if(session.getAttribute("userinfomsg") !=null){
                out.print("<script> alert(`"+session.getAttribute("userinfomsg")+"`); </script>");
                session.removeAttribute("userinfomsg");
            }
        %>
</div>


</body>
<script>
    twofriendModule();
    var uid = null;
    var fid = null;
    var Friendontes =null;
    var iconClas = '#pageIcon';
    // var iconTan = '#two_friend';
<%--<%--%>
<%--if(session.getAttribute("msg")!=null){--%>
<%--//    out.print("<script> part_Mask('#part_oneMask') </script>");--%>
<%--    out.print("<script> alert('修改成功'); </script>");--%>
<%--}--%>
<%--%>--%>

<%--    wsy                                   --%>
<%--    头像--%>
meimg()
    function meimg(){
        $.ajax({
            url: "<%= request.getContextPath()%>/meimg",
            type: 'post',
            dataType: "json",
            success: function (data) {
                $('#meheadImg').html(
                    `
                    <img src="`+data[0].meimage+`" alt="" width="100%" onclick="part_Mask('#part_oneMask')">`
                )
            }
        })
    }
    //个人信息
    function part_Mask(id) {
        $(id).show();
        $('#three_page_ID').hide();
        $.ajax({
            url: "<%= request.getContextPath()%>/meinfo?acc=" + uid,
            type: 'post',
            dataType: "json",
            success: function (data) {
                console.log(data)
                $('#me_status').html(`
<form action="<%= request.getContextPath()%>/upUserdata" method="post">
                    <div class="sta_head">
                    <div class="sta_head_friImg">
                        <img src="` + data[0].meimage + `" alt="" width="100%">
                    </div>
                    <div class="sta_head_friInfo">
                        <h3 style="margin:2px 5px">`+ data[0].nickname +`</h3>
                        <p style="margin:0px 5px;font-size: 16px">xx</p>
                    </div>
                    </div>
                    <div class="sta_text" id="sta-text-sele">
                        <ul>
                            <li><span>账  号：</span>` + data[0].account + `</li>
                            <li><span>昵  称：</span>` + data[0].nickname + `</li>
                            <li><span>个  人：</span>` + data[0].sex + ` &nbsp; `+ data[0].age+`</li>
                            <li><span>地  址：</span>` + data[0].address + `</li>
                            <li><span>职  业：</span>` + data[0].occuption + `</li>
                            <li><span>电  话：</span>` + data[0].phone + `</li>

                        </ul>
                    </div>
                    <div class="sta_text" style="display: none" id="sta-text-updata">
                        <ul>

                            <li><span>账  号：</span>` + data[0].account + `</li>
                            <li><span>昵  称：</span><input type="text" value="` + data[0].nickname + ` " style="height: 25px;width: 80%" name="upName1"></li>
                            <li>

                                    <span>性  别：</span><select style="width: 65px;height: 25px" name="upSex1" value="` + data[0].sex +`">
                                        <option value="男">男</option> <option value="女">女</option>
                                    </select>
                                    </span>
                                    <span>
                                        <span style="margin-left:10px ">  生 日：</span><input type="date" value="`+ data[0].ageDate +`" style="height: 25px;width: 41%" name="upAge1" >
                                    </span>

                            </li>
                            <li><span>地  址：</span><input type="text"  style="height: 25px;width: 80%" value="` + data[0].address + `" name="upAddress1"></li>
                            <li><span>职  业：</span><input type="text"  style="height: 25px;width: 80%" value="` + data[0].occuption + `" name="upOccuption1"></li>
                            <li><span>电  话：</span><input type="text"  style="height: 25px;width: 80%" value="` + data[0].phone + `" name="upPhone1"></li>

                        </ul>

                      </div>
                    <div class="sta_tab">
                        <button  type="submit">保存</button>
                        <button type="button" onclick="upUserdata()"> 编辑 </button>
                    </div>
</form>
                `)
            }
        })
    }


    //进入聊天蒙版
    function addModule() {
        $('.three_mask').hide();
        $('.three_page').show();

        notseCount();
        // console.log(acc)
        $.ajax({
            url: "<%= request.getContextPath()%>/pageFriinfo?acc=" + fid,
            type: 'post',
            dataType: "json",
            success: function (data) {
                // console.log(data)
                if (data[0].friName == null) {
                    data[0].friName = data[0].nickname;
                }

                $('#three_page_ID').html(`
            <div class="three_headTab">
                <p >
                <h3 style="padding: 13px 0px 0px 15px ;">
                ` + data[0].friName + `
                </h3><span class="three_headTab_pan"><span class="iconfont icon-close-bold" onclick="$('.three_page').hide()"></span></span></p>
            </div>

            <div class="TextTab" id="TextTab_id">

            </div>
            <div class="inputTab">

                <%--<form action="<%= request.getContextPath() %>/candyappSer?uid=` + data[0].userid + `&&fid=` + data[0].friendid + `" method="post">--%>
                    <textarea   id="chaw" cols="30" rows="6"></textarea>
                    <%-- <button  id="subTab" type="submit">发送</button>--%>
                    <button  id="subTab" type="reset" onclick="addNotes()">发送</button>
                 </form>
            </div>
               `)
                notes();

            }
        })

    }

    setInterval(notseCount, 1000)
    //根据查询数据行数变化来获取数据
    function notseCount() {
        $.ajax({
            url: `<%= request.getContextPath()%>/notesCount?uid=` + uid + `&&fid=` + fid,
            type: 'post',
            dataType: "json",
            success: function (data) {
                if (  Friendontes !== data[0].cb)(
                    Friendontes =  data[0].cb,
                        addModule()
                )
            }
        })

    }
    //发送信息
    function addNotes() {
        var tmp = $('#chaw').val();
        document.getElementById("chaw").value="";
        $.ajax({
            url: `<%= request.getContextPath() %>/candyappSer?uid=` + uid + `&&fid=` + fid +`&&chaw=` +tmp,
            type: 'post',
            dataType: "json",
            success: function (data) {
                if (data !== 1){
                    alert("发送失败")
                }
                addModule();
            }
        })
    }
    //聊天记录
    function notes() {
        $('#TextTab_id').scrollTop( $('#TextTab_id')[0].scrollHeight);
        $.ajax({
            url: "<%= request.getContextPath()%>/selepagenotes?uid=" + uid + "&&fid=" + fid,
            type: 'post',
            dataType: "json",
            success: function (data) {
                // console.log(data)
                for (var i = 0; i < data.length; i++) {
                    if (data[i].Tuid == uid) {
                        $('#TextTab_id').append(`
                            <div class="TextTab_page" id="me_page">` + data[i].notes + `</div><br>
                        `)
                    } else {
                        $('#TextTab_id').append(`
                            <div class="TextTab_page" id="you_page">` + data[i].notes + `</div><br>
                        `)
                    }
                }


            }
        })

    }
    // 验证添加好友
    function verifyaddFriend(){

        $.ajax({
            url: "<%= request.getContextPath()%>/verifyaddFriend?acc=" + uid,
            type: 'post',
            dataType: "json",
            success: function (data) {
                if (data.length > 0){
                    $('.friTab').css( 'box-shadow', ' 0px 0px 2px red')
                }
                selectAddFriendinfo(data[0].userid);
            }
        })
    }
    //验证好友时查询好友信息
    function selectAddFriendinfo(acc){
        $.ajax({
            url: "<%= request.getContextPath()%>/selectAddFriendinfo?acc=" + acc,
            type: 'post',
            dataType: "json",
            success: function (data) {
                $('#verifyMask').html(`
                        <div class="friendTab" id="friendTab">
                    <div class="headBor">
                    <img src="` + data[0].meimage + `" alt="" width="100%"> </div>
                    <sapn  >` + data[0].nickname + `(<span style="color: #00d2ff">`+data[0].account +`</span>)</sapn>
                    <button onclick="agreeaddFri(`+data[0].account +`)">同意</button> <button onclick="refuseaddFri(`+data[0].account +`)">拒绝</button>
 </div>
                `)

            }
        })
    }
    // 同意添加好友
    function agreeaddFri(acc){
        $.ajax({
            url: "<%= request.getContextPath()%>/agreeaddFri?uid=" + uid+`&&fid=`+acc,
            type: 'post',
            dataType: "json",
            success: function (data) {
                location.href='/page.jsp';
            }
        })
    }
    //拒绝添加好友
    function refuseaddFri(fid){
        $.ajax({
            url: "<%= request.getContextPath()%>/refuseaddFri?uid=" + uid+`&&fid=`+fid,
            type: 'post',
            dataType: "json",
            success: function (data) {
                location.href='/page.jsp';
            }
        })
    }

<%--    wsy                                   --%>




<%--    hhx                    --%>
    //修改个人信息
    function upUserdata2() {
        $.ajax({
            url: "<%= request.getContextPath()%>/upUserdata",
            type: 'post',
            dataType: "json",
            success: function (data) {
                console.log(data);
                part_Mask();

            }
        })
    }
    //修改用户信息蒙版关闭显示
    function upUserdata() {
        $('#sta-text-updata').show();
        $('#sta-text-sele').hide();

    }
    //打印好友列表
    function twofriendModule() {
        $.ajax({
            url: "<%= request.getContextPath()%>/friend",
            type: 'post',
            dataType: "json",
            success: function (data) {
                console.log(data)
                uid = data[0].userid;

                $('#two_friend').html(`
                 <div class="friTab" ><span onclick="$('#verifyMask').slideToggle()">好友通知</span>
                            <div class="verifyMask" id="verifyMask" style="display: none">
                        </div>
                        </div>
                `);
                for (var i = 0; i < data.length; i++) {
                    if (data[i].friName == null) {
                        data[i].friName = data[i].nickname;
                    }
                    $('#two_friend').append(
                        `
                        <div class="friendTab" id="friendTab${i}" onclick="friendMask('#friendTab${i}',${i},`+ data[i].friendid +`)" >
                            <div class="headBor"><img src="`+data[i].meimage+`" alt="" width="100%"></div><span>` + data[i].friName + `</span>
                        </div>`
                    )
                }
                verifyaddFriend()

            }

        })

    }
    //好友个人信息
    function friStatext(num ,friid) {
        $.ajax({
            url: "<%= request.getContextPath() %>/friendinfo?fid="+friid ,
            type: 'post',
            dataType: "json",
            success: function (data) {
                if (data[0].friName == null) {
                    data[0].friName = data[0].nickname;
                }
                fid = data[0].account;
                $('#status_ID').html(
                    `
                <div class="sta_head">
                    <div class="sta_head_friImg">
                     <img src="` + data[0].meimage + `" alt="" width="100%">
</div>
                    <div class="sta_head_friInfo">
                       <h3 style="margin:2px 5px">`+ data[0].friName +`</h3>
                        <p style="margin:0px 5px;font-size: 16px">xx</p>
                    </div>
                </div>
                <div class="sta_text" id="Frista_text">
                    <ul>
                        <li><span>账  号：</span>` + data[0].account + `</li>
                        <li><span>昵  称：</span>` + data[0].nickname + `</li>
                        <li><span>备  注：</span>` + data[0].friName + `</li>
                        <li><span>个  人：</span>` + data[0].sex + ` &nbsp; `+ data[0].age+`</li>
                        <li><span>地  址：</span>` + data[0].address + `</li>
                        <li><span>职  业：</span>` + data[0].occuption + `</li>
                        <li><span>电  话：</span>` + data[0].phone + `</li>
                    </ul>
                </div>
                <div class="sta_tab2">
                    <button class="TabOne" onclick="deleteFrirnd(`+ data[0].account +`)">删除</button>
                    <button class="TabTwo" onclick="addModule()">发信息</button>
                </div>
`
                )
            }
        })
    }
<%--    hhx                   --%>




<%--    cla                                 --%>
    //删除好友
    function deleteFrirnd(acc){
        if (confirm("确定删除吗？")) {
            $.ajax({
                url: `<%= request.getContextPath()%>/deleteFrirnd?acc=`+ acc +`&&uid=`+ uid,
                type: 'post',
                dataType: "json",
                success: function (data) {
                    alert("删除成功")
                    location.href='/page.jsp';
                }
            })
        }
    }
    //模糊查询
    function vagueSelect(){
        var tmp = $('#vague').val();
        document.getElementById("vague").value="";
        $('#vagueMask').slideToggle()
        $.ajax({
            url: "<%= request.getContextPath()%>/vagueSelect?tmp=" + tmp +`&&uid=`+uid,
            type: 'post',
            dataType: "json",
            success: function (data) {
                $('#vagueMask').html(`
                          <span class="iconfont icon-close"
                  onclick="vagueSelect()"
                  style="display: block;height: 35px"></span>
                `);
                for (var i =0 ; i<data.length;i++){
                    $('#vagueMask').append(`
                    <div class="friendTab" id="friendTab">
                    <div class="headBor">
                    <img src="` + data[i].meimage + `" alt="" width="100%"> </div>
                    <sapn  >` + data[i].nickname + `(<span style="color: #00d2ff">`+data[i].account +`</span>)</sapn>

 </div>`)
                }
            }
        })
    }

<%--    cla                             --%>
    // 点击下部分图标换颜色
    function icon_click(clas) {
        $(iconClas).css('color', 'black');
        iconClas = clas;
        $(clas).css('color', '#00d2ff');
    }
    //上部分图标换颜色蒙版
    function icon_clickTwo(clas) {
        $(iconClas).css('color', 'black');
        iconClas = clas;
        $(clas).css('color', '#00d2ff');

        twofriendModule();
    }
    //好友列表点击，选择变灰色
    function friendMask(index, num,friid) {
        $(".three_mask").show();
        $('.three_page').hide();
        friStatext(num,friid);
        $('.friendTab').css('background', '#ffffff');
        $(index).css('background', '#ccc');

    }
</script>

</html>
